<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2.0 Node对象的方法</title>
  </head>

  <body>
    <div style="margin-left: 50px">
      <button id="btnAppendChild">appendChild</button>
      <button id="btnInsertBefore">insertBefore</button>
      <button id="btnReplaceChild">replaceChild</button>
      <button id="btnTextContent">textContent</button>
    </div>
    <div style="margin: 50px">
      <div id="buttons">
        <button id="btnBase">基准按钮</button>
      </div>

      <div id="contents">
        <span id="textContent">基础文本 <span>111</span></span>
      </div>
    </div>

    <script>
      btnAppendChild.addEventListener("click", function (e) {
        const btn = document.createElement("button");
        btn.textContent = "appendChild";
        // parentNode.appendChild();
        buttons.appendChild(btn);
      });

      btnInsertBefore.addEventListener("click", function (e) {
        const btn = document.createElement("button");
        btn.textContent = "btnInsertBefore";
        // 语法： const insertedNode = parentNode.insertBefore(newNode, referenceNode);
        buttons.insertBefore(btn, btnBase);
      });

      btnReplaceChild.addEventListener("click", function () {
        const btn = document.createElement("button");
        btn.textContent = "replaceChild";
        // parentNode.replaceChild(newChild, oldChild);
        buttons.replaceChild(btn, btnBase);
      });

      btnTextContent.addEventListener("click", function () {
        textContent.textContent = "textContent";
      });
    </script>
  </body>
</html>
